<!-- 成品质检合格率 -->
<template>
  <div class="mes-container">
    <div class="containerBox">
      <canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas>
      <div class="titleBox">
        <span>设备点检保养看板</span>
        <div class="topLeft">{{compInfo.compName}}</div>
        <div class="timeDiv">{{ time[1] }} {{ time[0] }}</div>
      </div>
      <div class="contentBox">
        <div class="upBox">
          <div class="upBoxLeft fl">
            <div class="overview panel">
              <div class="inner">
                <h3>点检记录明细</h3>
              </div>
            </div>
          </div>
          <div class="upBoxRight fl">
            <div class="overview panel">
              <div class="inner">
                <div class="upRight">
                  <h3>点检完成汇总</h3>
                  <span>
                    计划数：
                    {{checkPlanNum}}
                  </span>
                  <div style="width: 100%;height: calc(100% - 30px);">
                    <left-eqInfo ref="leftEqInfo" />
                  </div>
                </div>
                <div class="upRight">
                  <h3>保养完成汇总</h3>
                  <span>
                    计划数：
                    {{maintainPlanNum}}
                  </span>
                  <div style="width: 100%;height: calc(100% - 30px);">
                    <left-eqInfo-two ref="leftEqInfoTwo" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="downBox">
          <div class="downBoxMin downBoxLeft fl">
            <div class="overview panel">
              <div class="inner">
                <h3>点检记录明细</h3>
                <div style="width: 100%;height: calc(100% - 30px);">
                  <right-tab-check-record ref="rightTabCheckRecord" />
                </div>
              </div>
            </div>
          </div>
          <div class="downBoxMin downBoxRight fl">
            <div class="overview panel">
              <div class="inner">
                <h3>保养记录明细</h3>
                <div style="width: 100%;height: calc(100% - 30px);">
                  <right-tab-by-record ref="rightTabByRecord" />
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="leftContent fl">
          <div class="overview panel">
            <div class="inner">
              <h3>点检完成汇总</h3>
              <div style="width: 100%;height: calc(100% - 30px);">
                <left-eqInfo ref="leftEqInfo" />
              </div>
            </div>
          </div>
          <div class="overview panel">
            <div class="inner">
              <h3>保养完成汇总</h3>
              <div style="width: 100%;height: calc(100% - 30px);">
                <left-eqInfo-two ref="leftEqInfoTwo" />
              </div>
            </div>
          </div>
        </div>
        <div class="centerContBox fl">22</div>
        <div class="rightContBox fl">
          <div class="overview panel">
            <div class="inner">
              <h3>点检记录明细</h3>
              <div style="width: 100%;height: calc(100% - 30px);">
                <right-tab-check-record ref="rightTabCheckRecord" />
              </div>
            </div>
          </div>
          <div class="overview panel">
            <div class="inner">
              <h3>保养记录明细</h3>
              <div style="width: 100%;height: calc(100% - 30px);">
                <right-tab-by-record ref="rightTabByRecord" />
              </div>
            </div>
          </div>
        </div>-->
      </div>
    </div>
  </div>
</template>
<script>
import { getCurrentDate } from '@/utils/function'
import { bgFun } from '../../../bg.js'
import leftEqInfo from './components/leftEqInfo'
import leftEqInfoTwo from './components/leftEqInfoTwo'
import rightTabCheckRecord from './components/rightTabCheckRecord'
import rightTabByRecord from './components/rightTabByRecord'
import { mapGetters } from 'vuex'
export default {
  name: 'EqMaintenance',
  components: {
    leftEqInfo,
    leftEqInfoTwo,
    rightTabCheckRecord,
    rightTabByRecord
  },
  data() {
    return {
      time: getCurrentDate(),
      timeInterval: () => {},
      interval: () => {},
      checkPlanNum: '',
      maintainPlanNum: ''
    }
  },
  computed: {
    ...mapGetters(['compInfo'])
  },
  created() {},
  async mounted() {
    bgFun()
    await this.startInterval()
    await this.getEquipPoint()
    await this.getEquipPointTwo()
    await this.getPointRecord()
    await this.getMaintainRecord()
  },
  beforeDestroy() {
    clearInterval(this.timeInterval)
    clearInterval(this.interval)
  },
  methods: {
    /* 刷新 */
    async refreshBtn() {},
    async startInterval() {
      /** 开启时间定时器 */
      this.timeInterval = setInterval(() => {
        this.time = getCurrentDate()
      }, 1000)
    },
    /* 获取点检完成汇总 */
    async getEquipPoint() {
      const res = await this.$axios.get(
        '/board/equip/pointMaintain/pointSummary'
      )
      if (res.data.code === 200) {
        let data = {
          time: [],
          num: []
        }
        res.data.data.details.forEach((item) => {
          data.time.push(item.pointDate)
          data.num.push(item.pointNum)
        })
        this.checkPlanNum = res.data.data.planNum
        this.$refs['leftEqInfo'].setEquipmentLine(data)
      }
    },
    /* 获取保养完成汇总 */
    async getEquipPointTwo() {
      const res = await this.$axios.get(
        '/board/equip/pointMaintain/maintainSummary'
      )
      if (res.data.code === 200) {
        let data = {
          time: [],
          num: []
        }
        res.data.data.details.forEach((item) => {
          data.time.push(item.maintainDate)
          data.num.push(item.maintainNum)
        })
        this.maintainPlanNum = res.data.data.planNum
        this.$refs['leftEqInfoTwo'].setEquipmentLineTwo(data)
      }
    },
    /* 获取点检记录 */
    async getPointRecord() {
      this.$refs['rightTabCheckRecord'].getTableInfo()
    },
    /* 获取点检记录 */
    async getMaintainRecord() {
      this.$refs['rightTabByRecord'].getTableInfo()
    }
  }
}
</script>
<style lang='scss' scoped>
.mes-container {
  position: fixed;
  z-index: 999999 !important;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  height: 100%;
  width: 100%;
  background: radial-gradient(hwb(221 0% 34%) 20%, #001439 70%);
  background-size: 100% 100%;
  min-width: 1100px;
  min-height: 620px;
  .containerBox {
    position: relative;
    height: 100%;
    .titleBox {
      height: 70px;
      background: url(../../../assets/images/topBg.png) no-repeat;
      background-size: 100% 100%;
      border-bottom: 1px solid #162c52;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      span {
        color: #fff;
        font-weight: bold;
        font-size: 1.8rem;
        letter-spacing: 0.1em;
        background: linear-gradient(
          to bottom,
          #f5f5f5,
          #1eb6fe
        ); /* 从左到右渐变 */
        -webkit-background-clip: text; /* Safari/Chrome支持该属性 */
        color: transparent; /* 将文本颜色设置为透明 */
      }
      .timeDiv {
        position: absolute;
        left: 40px;
        top: 20px;
        color: #fff;
        font-weight: bold;
        font-size: 1rem;
      }
      .topLeft {
        position: absolute;
        right: 40px;
        top: 10px;
        color: #fff;
        font-weight: bold;
        font-size: 1rem;
        background: url(../../../assets/images/titBg.png) no-repeat;
        background-size: 100% 100%;
        height: 35px;
        line-height: 35px;
        padding: 0 15px;
      }
      .refresh {
        width: 80px;
        position: absolute;
        right: 30px;
        top: 20px;
        text-align: right;
        color: #fff;
        cursor: pointer;
        font-weight: bold;
        font-size: 1rem;
      }
    }
    .fl {
      float: left;
    }
    .contentBox {
      padding: 10px;
      height: calc(100% - 70px);
      .overview {
        height: 100%;
        background: rgba(15, 27, 71, 0.5);
      }
      .panel {
        /* 边框 */
        box-sizing: border-box;
        border: 2px solid red;
        border-image: url(../../../assets/images/border.png) 51 38 21 132;
        border-width: 2.125rem 1.583rem 0.875rem 5.5rem;
        position: relative;
        margin-bottom: 0.833rem;
      }
      .line {
        position: absolute;
        left: 0;
        top: 0;
      }
      .panel .inner {
        /* 装内容 */
        /* height: 60px; */
        position: absolute;
        top: -2.125rem;
        right: -1.583rem;
        bottom: -0.875rem;
        left: -5.5rem;
        padding: 1rem 1.5rem;
      }
      .panel h3 {
        font-size: 1rem;
        color: #fff;
        margin: 0;
      }
      .upBox {
        height: 60%;
        width: 100%;
        padding-bottom: 10px;
        .upBoxLeft {
          width: 65%;
          padding-right: 5px;
          height: 100%;
        }
        .upBoxRight {
          width: 35%;
          padding-left: 5px;
          height: 100%;
          .upRight {
            height: 50%;
            position: relative;
            span {
              position: absolute;
              right: 10px;
              top: 5px;
              color: #fff;
              font-weight: bold;
              background: #1592fe;
              padding: 5px 5px;
              border-radius: 8px;
            }
          }
        }
      }
      .downBox {
        height: 40%;
        width: 100%;
        .downBoxMin {
          width: 50%;
          height: 100%;
        }
        .downBoxLeft {
          padding-right: 5px;
        }
        .downBoxRight {
          padding-left: 5px;
        }
      }
      .leftContent {
        width: 25%;
        height: 100%;
      }
      .centerContBox {
        width: 40%;
        height: 100%;
      }
      .rightContBox {
        width: 35%;
        height: 100%;
      }
    }
  }
}
.box {
  height: 100%;
  width: 100%;
}
.waves {
  width: 100%;
  height: 100%;
}
</style>
